<template>
	<!-- 新增入库 -->
	<Form :label-width="100">
		<div class="a">
			<FormItem label="采购员工:">
				{{userInfo.userName}}
			</FormItem>
			<FormItem label="联系方式:">
				{{userInfo.telephone}}
			</FormItem>
		</div>
		<FormItem>
			<Button class="button" type="error" @click="modal = true">新增</Button>
		</FormItem>
		<Modal v-model="modal" title="请选择商品">
			<Form label-position="left" :label-width="100">
				<Form-item label="产品类型">
					<Select v-model="product.type">
						<Option v-for="tList in typeList" @click.native="searchName" :value="tList">{{ tList }}</Option>
					</Select>
				</Form-item>
				<Form-item label="产品名称">
					<Select v-model="product.name" @on-change="searchPrice">
						<Option v-for="nList in nameList" :value="nList.productName">
							{{ nList.productName }}
						</Option>
					</Select>
				</Form-item>
				<Form-item label="购买数量">
					<Input-number v-model="product.num" :min="1" @on-change="total">
						{{product.num}}
					</Input-number>
				</Form-item>
				<Form-item label="产品单价">
					{{product.price}}
				</Form-item>
				<Form-item label="产品总价">
					{{product.productTotal}}
				</Form-item>
			</Form>
			<div slot="footer">
				<Button type="primary" style="float: left;" @click="ok">保存</Button>
				<Button @click="cancel">返回</Button>
			</div>
		</Modal>
		<div class="b">
			<Table border width="1300" :columns="tableInfo.columnInfo" :data="products">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="error" class="button" @click="remove(index)">删除</Button>
				</template>
			</Table>
			<Button class="save" type="primary" @click="addPurchase">保存</Button>
			<Button class="return">返回</Button>
		</div>
	</Form>
</template>

<script>
	import store from '../../common/store.js';
	import local from '../../common/_local.js';
	import axios from 'axios';
	export default {
		data() {
			return {
				typeList: [],
				nameList: [{
					type: "",
					productName: "",
					price: 0,
					state: ""
				}],
				newNameList: [],
				products: [],
				product: {
					type: '',
					name: '',
					num: 0,
					price: 0,
					productTotal: 0
				},
				flag: true,
				modal: false,
				userInfo: {
					userId : '',
					userName: '',
					telephone: '',
					storeId : '',
				},
				tableInfo: {
					columnInfo: [
						{
							title: "产品类型",
							key: "type",
							align: 'center'
						},
						{
							title: "产品名称",
							key: "name",
							align: 'center'
						},
						{
							title: "采购数量",
							align: 'center',
							key: "num",
						},
						{
							title: "采购单价",
							align: 'center',
							key: "price",
						},
						{
							title: "小计",
							align: 'center',
							key: "productTotal",
						},
						{
							title: "操作",
							align: 'center',
							slot: 'action',
							width: '130px'
						}
					]

				},
			}
		},
		methods: {
			init: function() {
				this.searchType();
			},
			//将弹窗数据保存到表里
			ok() {
				// 非空判断
				if ('' == this.product.type) {
					this.$Message.error('请选择产品类型');
					this.clean();
					return;
				}
				if ('' == this.product.name) {
					this.$Message.error('请选择产品名称');
					this.clean();
					return;
				}
				if (0 == this.product.num) {
					this.$Message.error('请输入采购数量');
					this.clean();
					return;
				}
				// 装载商品数据
				let add = {
					type: this.product.type,
					name: this.product.name,
					num: this.product.num,
					price : this.product.price,
					productTotal : this.product.productTotal 
				}
				//循环遍历重复数据
				for (var i = 0; i < this.products.length; i++) {
					if (add.type == this.products[i].type && add.name == this.products[i]
						.name) {
						this.products[i].num = this.products[i].num + add.num;
						this.products[i].productTotal = this.products[i].num * this.products[i].price;
						this.flag = false;
						break;
					} else {
						this.flag = true;
					}
					
				}
				if (this.flag) {
					this.products.push(add);
				}
				this.$Message.info('添加成功');
				this.modal = false;
				this.clean();
				this.nameList = this.newNameList;
			},
			cancel() {
				this.$Message.info('已取消');
				this.modal = false;
				this.clean();
				
				this.nameList = this.newNameList;
			},
			searchType: function() {
				this.http.get({
					url: "/product/type_list",
				}).then(data => {
					this.typeList = data;
				});
			},
			searchName: function() {
				this.http.get({
					url: "/product/product/list",
					param: {
						type: this.product.type
					}
				}).then(data => {
					this.nameList = data;
				});
			},
			searchPrice() {
				for (var i = 0; i < this.nameList.length; i++) {
					if (this.nameList[i].productName == this.product.name) {
						this.product.price = this.nameList[i].price
					}
				}
			},
			total() {
				this.product.productTotal = this.product.price * this.product.num
			},
			
			remove: function(index) {
				this.message.confirm({
					title: '删除提示',
					content: '确定删除产品信息？',
					onOk: () => {
						this.products.splice(index, 1);
					},
				})
			},
			clean() {
				this.product.num = 0;
				this.product.type = '';
				this.product.name = '';
				this.product.price= 0;
				this.product.productTotal= 0;
			},
			// addPurchase() {
			// 	let InsertPurchaseHeaderAndPurchaseItem = {
			// 		userId: this.userInfo.userId,
			// 		storeId: this.userInfo.storeId,
			// 		purchaseItemList: this.products
			// 	}
			// 	console.log("++++++++++++++++++++++++++++++++++")
			// 	console.log(InsertPurchaseHeaderAndPurchaseItem)
			// 	this.$axios.post('http://localhost:8060/purchase/info',InsertPurchaseHeaderAndPurchaseItem).then(data =>{
					
			// 	});
				
			// 	this.product = [];
			// },
			addPurchase: function() {
				let InsertPurchaseHeaderAndPurchaseItem = {
					userId: this.userInfo.userId,
					storeId: this.userInfo.storeId,
					purchaseItem: JSON.stringify(this.products)
				}
				console.log("================================")
				console.log(InsertPurchaseHeaderAndPurchaseItem)
				this.http.post({
					url: "/purchase/info",
					param: InsertPurchaseHeaderAndPurchaseItem
				}).then(data => {
					this.nameList = data;
				});	
				this.$tabs.close();
			},
		},
		//初始化页面
		created: function() {
			this.init();
			this.searchType();
			this.userInfo.userName = local.getItem("USER_NAME");
			this.userInfo.userId = local.getItem("USER_ID");
			this.userInfo.telephone = local.getItem("TELEPHONE");
			this.userInfo.storeId = local.getItem("STORE_ID");
		}
	}
</script>

<style>
	.a {
		width: 50%;
		height: 65%;
		margin: 0 auto;
		margin-top: 100px;
		position: relative;
		left: 10%;
	}

	.a>* {
		margin-top: -20px;
	}

	.b {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		right: -7%;
	}

	.input {
		width: 250px;
	}

	.button {
		width: 80px;
		margin-left: 1%;
	}

	.return {
		position: absolute;
		right: 15%;
		width: 80px;
		margin-top: 20px;
	}

	.save {
		float: left;
		width: 80px;
		margin-top: 20px;
	}
</style>
